<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebSocket Chat</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        #chat-window {
            width: 300px;
            height: 400px;
            border: 1px solid #000;
            padding: 10px;
            overflow-y: scroll;
        }
        #message-input {
            width: 200px;
        }
        #send-btn {
            width: 80px;
        }
        .message {
            margin-bottom: 10px;
        }
        .sent {
            color: green;
        }
        .received {
            color: blue;
        }
    </style>
</head>
<body>
<h2>WebSocket Chat</h2>
<div id="chat-window"></div>
<br>
<input type="text" id="message-input" placeholder="Type your message">
<button id="send-btn">Send</button>

<script>
    const wsUrl = 'ws://localhost:8081/ws/123'; // Replace with your WebSocket endpoint
    const socket = new WebSocket(wsUrl);

    const chatWindow = document.getElementById('chat-window');
    const messageInput = document.getElementById('message-input');
    const sendButton = document.getElementById('send-btn');

    let lastSentTime;
    let timeoutDuration = 60000;


    // Function to display message in chat window
    function displayMessage(message, type) {
        const messageElement = document.createElement('div');
        messageElement.classList.add('message', type);
        messageElement.textContent = message;
        chatWindow.appendChild(messageElement);
        chatWindow.scrollTop = chatWindow.scrollHeight; // Auto-scroll to bottom
    }

    // When WebSocket is open (connected)
    socket.onopen = function () {
        lastSentTime = Date.now();
        displayMessage('Connected to the chat server', 'sent');
    };

    // When WebSocket receives a message
    socket.onmessage = function (event) {
        lastSentTime = Date.now();
        displayMessage(`Server: ${event.data}`, 'received');
    };

    // Send message when the button is clicked
    sendButton.addEventListener('click', function () {
        const message = messageInput.value;
        if (message) {
            socket.send(message);  // Send message to the server
            lastSentTime = Date.now();
            displayMessage(`You: ${message}`, 'sent');  // Show sent message in the chat window
            messageInput.value = '';  // Clear input
        }
    });

    // Handle WebSocket errors
    socket.onerror = function (error) {
        displayMessage(`WebSocket error: ${error}`, 'sent');
    };

    // Handle WebSocket closing
    socket.onclose = function () {
        displayMessage('Disconnected from the server', 'sent');
    };

    // Optionally, allow Enter key to send message
    messageInput.addEventListener('keydown', function (event) {
        if (event.key === 'Enter') {
            sendButton.click();
        }
    });
    setInterval(function() {
        timenow = Date.now();
        aftersendtime = timenow - lastSentTime
        if (aftersendtime > timeoutDuration) {
            console.log("close connection")
            socket.close();
        }
    }, 5000);

</script>
</body>
</html>
